<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-xs12">
			<div class="layui-card fllextopbox">
				<div class="">

					<a href="#/xxcourse/add?type" class="layui-btn" id="addbtn">添加课程</a>
				</div>
				<form class="layui-form" action="">
					<div class="layui-inline">
						<input type="text" class="layui-input" id="dataxx" placeholder="选择日期">
					</div>
					<div class="layui-inline ">
						<select name="shelves" lay-filter="xxshelvesfilter">
							<option value=" ">全部</option>
							<option value="1">已上架</option>
							<option value="2">预上架</option>
							<option value="3">已下架</option>
							<option value="4">审核中</option>
						</select>
					</div>
					<div class=" tablesearch iconfont iconsousuo ">
						<input type="text" class="layui-input" id="xxkey" placeholder="请输入搜索关键字">
					</div>
				</form>
			</div>
		</div>
	</div>
	<div class="layui-row " id="xxcards">
	</div>
	<div class="pagerow">
		<div id="xxpage">
		</div>
	</div>
</div>

<script type="text/html" id="xxid">
	{{#  layui.each(d.data, function(index, item){ }}
	<div class="layui-col-xs12 layui-col-sm6 layui-col-md4 layui-col-lg2 " data-id="{{item.id}}" >
	<div class="videocard">
	<a href="#/xxcourse/homepage?tbId={{item.tbId }}&type={{ d.xxcoursetype }}">
		<div class="videoimg" style="background-image:url({{ G_File_Url+item.tbCover}})">
			{{#  if(item.tbStatus === 1){ }}
		  <div class="videostates">显示</div>
		{{#  }else { }} 
		 	<div class="videostates" style="background: #ff5454;">隐藏</div>
		{{#  } }} 
		</div>
		<div class="videocont">
			<div class="videotitle">
			{{ item.tbTitle }}
			</div>
			<div class="videodata">
				{{ item.tbTime }}
					报名：{{ item.number }}人
			</div>
		</div>
		</a>	</div>
	</div>
{{#  }) }} 
</script>

<script>
	var itemxxjson;
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form', 'laytpl', 'laydate', 'laypage'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form,
			laydate = layui.laydate,
			laytpl = layui.laytpl,
			laypage = layui.laypage;
		var router = layui.router();
		$("#addbtn").attr("href","#/xxcourse/add?type="+router.search.type)
		// var  gotoadd = function(){
		// 	window.location.href = "#/xxcourse/add?type="+router.search.type
		// }
		//执行一个laypage实例
		itemxxjson = {
			currentPage: 1,
			pageSize: 24,
			search: '',
			shelves: '',
			startTime: '',
			stopTime: '',
			type:router.search.type || 1 
		}

		form.render();
		getxxofn(itemxxjson); //一开始初始化列表

		$('#xxkey').keydown(function(event) {
			//搜索框输入进行回车的相应
			if (event.keyCode == 13) {
				itemxxjson.search = $('#xxkey').val();
				getxxofn(itemxxjson);
			}
		})


		form.on('select(xxshelvesfilter)', function(data) {
			
			itemxxjson.shelves = data.value
			getxxofn(itemxxjson);
		});
		


		function getxxofn(item) {
			POSTAJAX(XXGet, item, function(res) {
				if (res.status == 200 && res.data != null) {
					$.each(res.data.data , function(idx, obj){
						if(obj.tbTime != null){
						obj.tbTime = obj.tbTime.substring(0 , 10)
						}else{
							obj.tbTime = '' 
						}
					})
					var data = res.data,
						view = document.getElementById('xxcards');

					laydate.render({
						elem: '#dataxx' //指定元素
							,
						range: true,
						done: function(value, date, endDate) {
							if (date.year == undefined) {
								itemxxjson.startTime = '';
								itemxxjson.stopTime = '';

							} else {
								itemxxjson.startTime = date.year + '-' + date.month + '-' + date.date;
								itemxxjson.stopTime = endDate.year + '-' + endDate.month + '-' + endDate.date;
							}

							getxxofn(itemxxjson);
						}
					});
					data.xxcoursetype = router.search.type ; 
					laytpl($("#xxid").html()).render(data, function(html) {
						$("#xxcards").html(html);
					});



					laypage.render({
						elem: 'xxpage',
						curr: itemxxjson.currentPage,
						count: data.totalCount, //数据总数
						limit: 24, //每页的显示条数

						// 自定义排版。可选值有：count（总条目输区域）、prev（上一页区域）、page（分页区域）、next（下一页区域）、limit（条目选项区域）、refresh（页面刷新区域。注意：layui 2.3.0 新增） 、skip（快捷跳页区域）

						layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
						theme: 'hhpage',
						jump: function(obj, first) {
							//obj包含了当前分页的所有参数，比如：
							console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
							console.log(obj.limit); //得到每页显示的条数

							itemxxjson = {
								currentPage: obj.curr,
								pageSize: 24,
								search: '',
								shelves: '',
								startTime: '',
								stopTime: '',
								type:router.search.type || 1 
							}
							
							//首次不执行
							if (!first) {
								//do something
								getxxofn(itemxxjson)
							}
							// getxxofn(itemxxjson)

						}
					});

				} else {
					layer.msg("当前搜索条件无视频哦", {
						'icon': 5
					})
				}

			})
		}





	});

</script>

<style scoped>

</style>
